<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>模块管理</title>
  <link rel="stylesheet" href="css/index.css">
  <script src="js/vue.js"></script>
  <script src="js/index.js"></script>
  <script src="js/axios-0.18.0.js"></script>
  <script src="js/token.js"></script>
  <style>
    .el-header{
      background-color: #545c64;
    }
    .header-img{
      width: 100px;
      margin-top:20px;
    }
  </style>
</head>
<body>
<div id="div">
  <template>
    <div class="dept-box">
      <el-row>
        <el-col :span="24">
          <div class="tool-box">
            <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="openFormToAdd">新增</el-button>
          </div>
        </el-col>
      </el-row>

      <el-table
              :data="list"
              row-key="moduleId"
              style="width: 100%">
        <el-table-column
                prop="name"
                label="名称"
                width="300">
        </el-table-column>
        <el-table-column
                prop="remark"
                label="描述"
                width="500">
        </el-table-column>
        <el-table-column
                label="状态">
          <template slot-scope="scope">
            {{ scope.row.state ? '启用' : '禁用' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="150">
          <template slot-scope="scope">
            <el-button
                    size="mini"
                    type="primary"
                    plain
                    @click="openFormToUpdate(scope.row)">编辑</el-button>
            <el-button
                    size="mini"
                    type="danger"
                    @click="openToDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>


      <el-dialog :title="dialogTitle" width="600px" :visible.sync="formVisible" @close="closeForm('form')">
        <el-form :model="form" :rules="rules" ref="form">
          <el-form-item label="名称" prop="name" label-width="50px">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="remark" label-width="50px">
            <el-input v-model="form.remark" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="上级" label-width="50px">
            <el-tree :data="list" :props="{label:'name'}" :expand-on-click-node="false"
                     ref="tree" node-key="moduleId" highlight-current></el-tree>
          </el-form-item>
          <el-form-item label="状态" label-width="50px">
            <el-switch v-model="form.state" active-color="#13ce66"
                       inactive-color="#ff4949"
                       :active-value="1"
                       :inactive-value="0"></el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="formVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmForm('form')">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
</div>
<script>
  let vue = new Vue({
    el:"#div",
    data: {
      list: [
        /*{
          moduleId:"1",
          name:"平台系统管理",
          remark:"一级菜单，包含平台级别的信息管理",
          state:1,
          children:[
            {moduleId:"101",name:"部门管理",remark:"二级菜单，部门信息管理", state:1},
            {moduleId:"102",name:"用户管理",remark:"二级菜单，用户信息管理", state:1},
            {moduleId:"103",name:"角色管理",remark:"二级菜单，角色信息管理", state:1},
            {moduleId:"104",name:"模块管理",remark:"二级菜单，模块信息管理", state:1}
          ]
        },
        {
          moduleId:"2",
          name:"题库管理",
          remark:"一级菜单，题库相关信息维护",
          state:1,
          children:[
            {moduleId:"201",name:"题目学科管理", state:1},
            {moduleId:"202",name:"题目类型管理", state:1},
            {moduleId:"203",name:"企业管理", state:1},
            {moduleId:"204",name:"题目管理", state:1}
          ]
        },
        {
          moduleId:"3",
          name:"会员管理",
          remark:"一级菜单，会员信息维护",
          state:1,
          children:[
            {moduleId:"301",name:"会员账号管理", state:1},
            {moduleId:"302",name:"会员答题管理", state:1}
          ]
        }*/
      ], /* 表示当前页数据 */
      form: {
        moduleId: '',
        name: '',
        parentId: null,
        state: 0
      }, /* 新增和修改表单数据, 必须和后台用来接收数据的 java bean 相对应, 并注意数据类型（日期在前台用字符串） */
      formVisible: false, /* 控制新增和修改表单可见性 */
      dialogTitle: '', /* 控制新增和修改表单标题 */
      rules: {
        /*name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ]*/
      } /* 表单校验规则 */
    },
    mounted () {
      this.findAll()
    }, /* data 初始化操作 */
    methods: {
      findAll () {
        axios.get("moduleServlet?method=findAll")
                .then((resp)=>{
                  if (resp.data.flag){
                    this.list = resp.data.resultData;
                  }else {
                    this.$message.error(resp.data.message);
                  }
                })
                .catch(()=>{
                  this.$message.error("请求错误!");
                })
      },
      delete (id) {
        axios.get("moduleServlet?method=delete&id="+id)
                .then((resp)=>{
                  if (resp.data.flag){
                    this.$message.success(resp.data.message);
                    this.findAll();
                  }else {
                    this.$message.error(resp.data.message);
                  }
                })
                .catch(()=>{
                  this.$message.error("请求错误!");
                })
      },
      add (formData) {
        axios.post("moduleServlet",formData+"&method=add")
                .then((resp)=>{
                  if (resp.data.flag){
                    this.$message.success(resp.data.message);
                    this.findAll();
                  }else {
                    this.$message.error(resp.data.message);
                  }
                })
                .catch(()=>{
                  this.$message.error("请求错误!");
                })
      },
      update (formData) {
        axios.post("moduleServlet",formData+"&method=update")
                .then((resp)=>{
                  if (resp.data.flag){
                    this.$message.success(resp.data.message);
                    this.findAll();
                  }else {
                    this.$message.error(resp.data.message);
                  }
                })
                .catch(()=>{
                  this.$message.error("请求错误!");
                })
      },
      openToDelete (row) {
        this.$confirm('确定删除 【'+row.name+'】 吗?', '提示', {
          type: 'warning'
        }).then(() => {
          this.delete(row.moduleId);
        }).catch(()=>{})
      },
      getStringParameter(formData) {
        let param = "";
        for(let property in formData) {
          if(formData[property] != null) {
            param += property + "=" + formData[property] + "&"
          }
        }
        param = param.substring(0,param.length-1);
        return param;
      },
      openFormToAdd () {
        this.dialogTitle = '新增';
        this.formVisible = true;
        this.form = {};
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(null)
        })
      },
      openFormToUpdate (row) {
        this.dialogTitle = '修改';
        this.formVisible = true;
        this.form = row;
        this.form.state = row.state;
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(row.parentId)
        })
      },
      confirmForm (formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            let id = this.form.moduleId;
            this.form.parentId = this.$refs.tree.getCurrentKey();
            this.form.children = null;
            let formData = this.getStringParameter(this.form);
            if (id) {
              this.update(formData)
            } else {
              this.add(formData);
            }
            this.formVisible = false;
          }
        })
      },
      closeForm (formName) {
        this.$refs[formName].clearValidate()
      },
    }
  });
</script>

<style>
  .dept-box {
    width: 100%;
  }
  .dept-box .tool-box {
    padding: 10px 10px;
    border-bottom: 1px solid #eee;
  }
  .dept-box .el-pagination {
    margin-top: 20px;
  }
</style>
</body>
</html>